<template>
  <div class="container">
    <div class="header">
      <el-button type="primary" onclick="history.back()">返回</el-button>
    </div>
    <div class="content">
      <label for="">
        标题: <el-input v-model="title" placeholder="" style="width: 80%" />
      </label>
      <div style="margin: 20px 0px">
        <label for="">正文:</label>
      </div>
      <!-- <br> -->
      <div>
        <tinymce v-model="content" :height="300" :isvidio="false" />
      </div>
      <br>
      <label for="">
        发布时间:
        <el-date-picker
          v-model="publishTime"
          type="datetime"
          value-format="yyyy-MM-dd HH:mm"
          placeholder="选择日期时间"
        />
      </label>
      <br>
      <label
        for=""
        style="margin: 20px 0px; font-weight: normal; display: block"
      >
        <input id="" v-model="now" type="checkbox"> &nbsp;&nbsp; 立即发布
      </label>
      <div class="sumbtn">
        <el-button type="primary" @click="add">提交</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import Tinymce from '@/components/Tinymce' // 添加富文本编辑器
import { parseTime } from '@/utils'
import { mapGetters } from 'vuex'
export default {
  components: {
    Tinymce
  },
  data: () => ({
    content: '',
    publishTime: '',
    title: '',
    id: 0,
    source: 1,
    now: false
  }),
  computed: {
    ...mapGetters(['visitedViews'])
  },
  created() {
    this.init()
  },
  // destroyed() {
  //   this.$store.dispatch('tagsView/delView', this.visitedViews[this.visitedViews.length - 1])
  // },
  methods: {
    init() {
      const { id } = this.$route.query
      if (id) {
        this.id = Number(id)
        this.$get(`/web/notice/get?id=${id}`).then(res => {
          console.log(res)
          if (res.data.code === '0') {
            const { publishTime, title, source, content } = res.data.data
            this.publishTime = parseTime(publishTime, '{y}-{m}-{d} {h}:{i}')
            this.title = title
            this.source = Number(source)
            this.content = content
          }
        })
      }
    },
    add() {
      const { content, id, title, source, publishTime } = this
      if (content.trim().length === 0 && title.trim().length === 0 && publishTime === '') {
        this.$message.error('正文不能为空,标题不能为空,请设置发布时间')
        return
      }
      if (title.trim().length === 0 && publishTime === '') {
        this.$message.error('标题不能为空,请设置发布时间')
        return
      }
      if (publishTime === '') {
        this.$message.error('请设置发布时间')
        return
      }
      if (new Date(publishTime).getTime() < Date.now()) {
        this.$message.error('所选时间不能小于当前时间')
        return
      }
      if (this.id === 0) {
        this.$post('/web/notice', { content, id, title, source, publishTime }, 'json').then(res => {
          if (res.data.code === '0') {
            this.$message.success('添加成功')
            this.$router.go(-1)
          } else {
            this.$message.error(res.data.message)
          }
        })
      } else {
        this.$put('/web/notice', { content, id, title, source, publishTime }, 'json').then(res => {
          if (res.data.code === '0') {
            this.$message.success('编辑成功')
            this.$router.go(-1)
          } else {
            this.$message.error(res.data.message)
          }
        })
      }
      if (this.now) {
        this.$put('/web/notice/updateStatus', { entity: { id, status: 1 }}, 'json').then()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  border: 1px solid #dfe6ec;
  width: 80%;
  margin: 30px auto;
  .header {
    height: 50px;
    line-height: 50px;
    text-align: right;
    border-bottom: 1px solid #dfe6ec;
  }
  .content {
    margin: 20px 10px;
  }
  .sumbtn {
    margin: 20px 0;
    text-align: center;
  }
}
</style>
